<template>
  <div class="main_box_son" style="margin-top:20px;">
    <div class="main_conent">
      <div class="title">财务</div>
      <div class="divheight10"/>
      <div class="audit_first">
        <el-row :gutter="20" type="flex" align="middle">
          <el-col :span="6">
            <div class="grid-content bg-purple displayib">
              <el-input v-model="search1" placeholder="请输入关键字，多项用“，”隔开" @input="serchChange"/>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="gjsx" style="color:#1A8FFE;" @click="showText = !showText">高级筛选
              <span :class="showText?'el-icon-arrow-up rotate1':'el-icon-arrow-up rotate'"/>
            </div>
          </el-col>
          <el-col :span="12"/>
          <el-col :span="1.5">
            <el-button class="width100">刷新</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button class="width100" @click="dialogVisible = true">忽略错误</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button class="width100" @click="dialogFormVisible = true">重新处理</el-button>
          </el-col>
          <el-dialog :visible.sync="dialogFormVisible" title="重新处理">
            <el-form :model="form">
              <el-form-item :label-width="formLabelWidth" label="业务日期">
                <el-date-picker/>-
                <el-date-picker/>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="选择组合">
                <el-input v-model="filterText" placeholder="输入关键字进行过滤"/>
                <el-tree
                  ref="tree2"
                  :data="data2"
                  :props="defaultProps"
                  :filter-node-method="filterNode"
                  show-checkbox
                  class="filter-tree"
                  default-expand-all
                />
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="流程区间">
                <el-select v-model="form.regionStart" placeholder="流程区间">
                  <el-option label="区域一" value="shanghai"/>
                  <el-option label="区域二" value="beijing"/>
                </el-select> -
                <el-select v-model="form.regionEnd" placeholder="流程区间">
                  <el-option label="区域一" value="shanghai"/>
                  <el-option label="区域二" value="beijing"/>
                </el-select>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog :visible.sync="dialogVisible" title="提示" width="30%">
            <span>
              若忽略该节点的错误，
              则视为导入成功，并继续
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="lgnoreMistakes">确 定</el-button>
            </span>
          </el-dialog>
        </el-row>
        <el-collapse-transition>
          <div v-show="showText" class="bgg transition-box">
            <el-row :gutter="100" type="flex" justify="space-between">
              <el-col :span="12">
                <div class="grid-content bg-purple-light textalign">
                  <template>
                    <span class="wn1">状态</span>
                    <el-select :clearable="flag" v-model="search2" class="claswithwn" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                  </template>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple textalign">
                  <template>
                    <span class="wn1">错误类型</span>
                    <el-select :clearable="flag" v-model="search3" class="claswithwn" placeholder="请选择">
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                  </template>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="100" type="flex" justify="space-between">
              <el-col :span="14">
                <div class="grid-content bg-purple-light textalign">
                  <template>
                    <span class="wn1">业务日期</span>
                    <el-date-picker/> - <el-date-picker/>
                  </template>
                </div>
              </el-col>
            </el-row>

            <el-row :gutter="40" type="flex" class="btnpr" justify="end">
              <el-col :span="6" class="btn2_c">
                <el-button class="btn" type="primary" size="medium ">查询</el-button>
                <el-button class="btn" type="success" size="medium " @click="storage">重置</el-button>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
      </div>
      <template>
        <el-table
          :data="tableData.filter(data => !search || Object.values(data).toString().toLowerCase().includes(search.toLowerCase()))"
          class="tb-edit"
          style="width: 100%"
          @cell-click="cellclick"
          @row-dblclick="dblclickFun"
          @selection-change="MultipleSelectionValue"
        >
          <el-table-column fixed align="center" type="selection" width="50"/>
          <el-table-column fixed type="index" width="50" label="序号" align="center"/>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="所属店铺">
                  <span>{{ props.row.shop }}</span>
                </el-form-item>
                <el-form-item label="商品 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="店铺 ID">
                  <span>{{ props.row.shopId }}</span>
                </el-form-item>
                <el-form-item label="商品分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="店铺地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.desc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item,index) in tableHead"
            :label="item.label"
            :property="item.property"
            :key="index"
            align="center"
          >
            <template slot-scope="scope" select="selecttest">
              <span>{{ MonitorDataToArr[scope.$index][index] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="240" fixed="right" type="index">
            <template slot-scope="scope">
              <div
                v-if="MonitorOldTableData[scope.$index].state === '待审核'||oldTableData[scope.$index].state === '已通过'"
              >
                <!-- <span>{{ oldTableData[scope.$index].state }}</span>         -->
                <!-- <router-link :to="{path: '/details', query: {num: scope.$index }}"><el-button type="primary" size="mini" >详情</el-button></router-link> -->
                <!-- <el-button size="mini" @click="dialogVisible = true">通过</el-button> -->
                <el-button type="text" size="mini">详情</el-button>
                <el-button type="text" size="mini">参数</el-button>
                <!-- <el-button type="danger" size="mini" @click="buttonReject([scope.$index])">驳回</el-button> -->
              </div>
              <div v-else-if="oldTableData[scope.$index].state === '已驳回'">
                <el-button type="text" size="mini">忽略错误</el-button>
                <el-button type="text" size="mini">重新导入</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="100"
            :total="400"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
          />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterText: '',
      data2: [
        {
          id: 1,
          label: '全选',
          children: [
            {
              id: 4,
              label: '组合一',
              children: [
                {
                  id: 9,
                  label: '组合二'
                },
                {
                  id: 10,
                  label: '组合三'
                }
              ]
            }
          ]
        }
        // {
        //   id: 2,
        //   label: '一级 2',
        //   children: [
        //     {
        //       id: 5,
        //       label: '二级 2-1'
        //     },
        //     {
        //       id: 6,
        //       label: '二级 2-2'
        //     }
        //   ]
        // }
        // {
        //   id: 3,
        //   label: '一级 3',
        //   children: [
        //     {
        //       id: 7,
        //       label: '二级 3-1'
        //     },
        //     {
        //       id: 8,
        //       label: '二级 3-2'
        //     }
        //   ]
        // }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dialogVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        regionStart: '',
        regionEnd: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      percentageVal: 100,
      currentPage: 0,
      showText: false,
      options: [
        {
          value: '待审核',
          label: '待审核'
        },
        {
          value: '已通过',
          label: '已通过',
          disabled: true
        }
      ],
      options2: [
        {
          value: '证券公司',
          label: '证券公司'
        },
        {
          value: '金融公司',
          label: '金融公司',
          disabled: true
        }
      ],
      value2: '',
      search: '',
      search1: '',
      search2: '',
      search3: '',
      search4: '',
      search5: '',
      tableHead: [
        {
          prop: 'name',
          label: '业务日期',
          align: 'left',
          width: 15
        },
        {
          prop: 'address',
          label: '组合代码',
          align: 'left',
          type: 'hl',
          width: 30
        },
        {
          prop: 'description',
          label: '组合名称',
          align: 'left',
          width: 50
        },
        {
          prop: 'date',
          label: '状态',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '失败原因',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '操作时间',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '经办人 ',
          align: 'left',
          width: 10
        }
      ],
      oldTableData: [],
      tableData: [],
      // 数据值
      dataToArr: [
        {
          name: '余额息表',
          number: 'A1001',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1002',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1003',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1004',
          state: '已通过',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1005',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1008',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1009',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1008',
          state: '已驳回',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1009',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '息表',
          number: 'A10010',
          state: '待审核',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        }
      ],
      flag: true
    }
  },
  computed: {
    MonitorOldTableData: function() {
      return this.oldTableData
    },
    MonitorDataToArr: function() {
      return this.dataToArr
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  mounted() {
    // this.drawLine()
    this.tableData = this.dataToArr
    this.oldTableData = this.dataToArr
    const tableList = this.tableData
    const arr = []
    for (var i = 0; i < tableList.length; i++) {
      arr[i] = []
    }
    for (const i in tableList) {
      for (const b in tableList[i]) {
        arr[i].push(tableList[i][b])
      }
    }
    this.dataToArr = arr
  },
  created() {},
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    lgnoreMistakes() {
      this.dialogVisible = false
      // alert('已忽略错误，导入成功')
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    dblclickFun(row, column, cell, event) {
      console.log(1)
      this.$router.push({
        path: '/details',
        query: {
          id: row.number
        }
      })
    },
    buttonReject(e) {
      this.oldTableData[e].state = '待审核'
      const tableList = this.tableData
      const arr = []
      for (var i = 0; i < tableList.length; i++) {
        arr[i] = []
      }
      for (const i in tableList) {
        for (const b in tableList[i]) {
          arr[i].push(tableList[i][b])
        }
      }
      this.dataToArr = arr
    },
    buttonPass(e) {
      this.oldTableData[e].state = '已通过'
      const tableList = this.tableData
      const arr = []
      for (var i = 0; i < tableList.length; i++) {
        arr[i] = []
      }
      for (const i in tableList) {
        for (const b in tableList[i]) {
          arr[i].push(tableList[i][b])
        }
      }
      this.dataToArr = arr
    },
    cellclick(row, column, cell, event) {
      // console.log(row) // 当前行数据
      // console.log(column)
      // console.log(cell) // 当前target
      // console.log(event)
    },
    // 多选的值
    MultipleSelectionValue(e) {},

    serchChange(e) {
      this.search = e
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // selectFocus (e) {
    //   this.temporary = this.tableData
    // },
    // selectBlur () {
    //   this.tableData = this.temporary
    // },
    // search2fun (e) {
    //   this.search = e
    //   console.log(e)
    //   this.tableData = this.tableData.filter(data => !this.search || Object.values(data).toString().toLowerCase().includes(this.search.toLowerCase()))
    //   let tableList = this.tableData
    //   let arr = []
    //   for (var i = 0; i < tableList.length; i++) {
    //     arr[i] = []
    //   }
    //   for (let i in tableList) {
    //     for (let b in tableList[i]) {
    //       arr[i].push(tableList[i][b])
    //     }
    //   }
    //   this.dataToArr = arr
    // },
    storage() {
      this.dataToArr = this.oldTableData
      console.log(this.dataToArr)
      this.search = ''
      this.search1 = ''
      this.flag = true
      this.search2 = null
      this.search3 = null
      this.search4 = null
      this.search5 = null
    }
  }
}
</script>

<style rel="stylesheet/stylus" lang="stylus" scope>
@import '../../../assets/common';

.title {
  width: 100%;
  border-bottom: $borderbottom;
  line-height: $titlelineheight;
  font-size: $titlefontsize;
}

.audit_first {
  padding: 20px 0;
}

.audit_first_span {
  font-size: 14px;
  padding-right: 20px;
  color: $colorbluedark;
}

.claswithwn {
  width: 50%;
  margin-top: 20px;
}

.el-pagination {
  margin: 20px 0;
}

.btn {
  height: 100%;
  display: inline-block;
}

.btnpr {
  padding-right: 40px;
}

.wn1 {
  padding-right: 20px;
}

.btn2_c {
  text-align: center;
  margin-top: 20px;
}

div.gjsx {
  display: inline-block;
  font-size: 16px;
  padding: 0 20px;
  cursor: pointer;
}

.displayib {
  display: inline-block;
  width: 100%;
}

.bgg {
  background: #fbfbfb;
  padding: 10px 0;
  margin-top: 10px;
}

.rotate {
  transform-origin: center center; // 旋转中心要是正中间 才行
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transition: transform 0.2s; // 过度时间 可调
  -moz-transition: -moz-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  -ms-transition: -ms-transform 0.2s;
}

.rotate1 {
  transform-origin: center center;
  transform: rotate(0deg); // 返回原点
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transition: transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  -ms-transition: -ms-transform 0.2s;
}

.baobiao_tab {
  height: 300px;

  .progress-item {
    padding-top: 20px;
  }
}

.baobiao_tab1 {
  height: 373px;
}

div.el-progress-bar__outer {
  height: 14px !important;
}

.circle {
  margin: 0 auto;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 2px 5px $colorbluedark;
  position: relative;
}

.circle_son {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: $colorbluedark;
  border-radius: 50%;
}

span>.circle_span {
  line-height: 50px;
}

.bbsc {
  margin: 0 auto;
  width: 80px;
  margin-top: 50px;

  p {
    text-align: center;
    line-height: 20px;
  }
}

.margint40 {
  margin-top: 40px;
}

.wunai {
}
</style>
